﻿<UserControl x:Class="SilverlightPlayground.LightBox.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:SilverlightPlayground.LightBox"
             xmlns:controls="clr-namespace:SilverlightPlayground.LightBox.Controls"
             mc:Ignorable="d" d:DesignHeight="582" d:DesignWidth="816">
    <UserControl.Resources>
        <local:MarginConverter x:Key="marginConverter" />
        <Storyboard x:Name="init">
            <DoubleAnimation Duration="00:00:00.100" To="0" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleX" />
            <DoubleAnimation Duration="00:00:00.100" To="0" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleY" />
        </Storyboard>
        <Storyboard x:Name="enter">
            <DoubleAnimation Duration="00:00:01.000" To="1" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleX">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Springiness="8" Oscillations="4" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Duration="00:00:01.000" To="1" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleY">
                <DoubleAnimation.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Springiness="8" Oscillations="4" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="exit">
            <DoubleAnimation Duration="00:00:00.100" To="0" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleX" />
            <DoubleAnimation Duration="00:00:00.100" To="0" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleY" />
        </Storyboard>
        <Storyboard x:Name="unload">
            <DoubleAnimation Duration="00:00:00.100" To="0" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleX" />
            <DoubleAnimation Duration="00:00:00.100" To="0" 
                             Storyboard.TargetName="gridTransform" Storyboard.TargetProperty="ScaleY" />
        </Storyboard>
    </UserControl.Resources>
    <Grid Background="#80000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="Common">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:1.0"/>
    				<VisualTransition From="Normal" GeneratedDuration="0:0:0.5" To="Show">
    					<VisualTransition.GeneratedEasingFunction>
    						<ElasticEase EasingMode="EaseOut" Springiness="12" Oscillations="5" />
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    				<VisualTransition From="Show" GeneratedDuration="0:0:1.0" To="Normal">
    					<VisualTransition.GeneratedEasingFunction>
    						<QuinticEase EasingMode="EaseIn" />
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    			</VisualStateGroup.Transitions>
    			<VisualState x:Name="Normal">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="-1000" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="PrevButton" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0" To="1000" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="NextButton" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="Show"/>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>        
        <Grid x:Name="grid" Grid.Column="1" RenderTransformOrigin=".5,.5" 
              HorizontalAlignment="Center" VerticalAlignment="Center"
              Margin="20" Background="#70ffffff" >
            <Grid.RenderTransform>
                <CompositeTransform x:Name="gridTransform" />
            </Grid.RenderTransform>
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="White" 
                       Margin="5" FontSize="16" Text="{Binding CurrentImage.Title}" />
            <Image x:Name="image" 
                   Source="{Binding CurrentImage.Uri}" 
                   MouseLeftButtonUp="image_MouseLeftButtonUp" Cursor="Hand" Margin="{Binding CurrentImage.Title, Converter={StaticResource marginConverter}}" />
        </Grid>
        <Grid x:Name="overlay" Opacity=".7">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="6*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="PrevButton" Grid.Column="0" IsEnabled="{Binding CanMoveBackward}" VerticalAlignment="Center" 
                    HorizontalAlignment="Center" Margin="10" BorderThickness="0" BorderBrush="White" Background="White" 
                    Template="{StaticResource PrevButtonTemplate}" Foreground="#FFFF9900" Width="100" Height="100" RenderTransformOrigin="0.5,0.5">
            	<Button.RenderTransform>
            		<CompositeTransform/>
            	</Button.RenderTransform>
            </Button>
            <Button x:Name="NextButton" Grid.Column="2" IsEnabled="{Binding CanMoveForward}" VerticalAlignment="Center" 
                    HorizontalAlignment="Center" Margin="10" BorderThickness="0" BorderBrush="White" Background="White" 
                    Template="{StaticResource NextButtonTemplate}" Foreground="#FFFF9900" Width="100" Height="100" RenderTransformOrigin="0.5,0.5" >
            	<Button.RenderTransform>
            		<CompositeTransform/>
            	</Button.RenderTransform>
            </Button>
        </Grid>
        <controls:WaitStar x:Name="waitStar" Grid.ColumnSpan="3" StarBrush="#55eeeeee" Background="#00000000" />
    </Grid>
</UserControl>